import React from "react";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";
// import DeleteIcon from '@material-ui/icons/Delete';
// import Button from "@material-ui/core/Button";

import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";


// import SwipeableViews from "react-swipeable-views";
import { makeStyles, useTheme } from "@material-ui/core/styles";

import useService from "../../service/useService";
import service from "../../service";

// import GridForm from "../../components/GridForm";
import GridFormDialog from "../../components/GridFormDialog";

import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

import { useAlertContext } from "../../contexts/AlertContext";
import {ProtoContext,ProtoProvider,useProtoContext} from "./context"

import {refreshProtos, protoTypes} from "./common"

import _ from "lodash";


const useStyles = makeStyles((theme) => ({
	displayFlex: {
		display: "flex",
	},
	displayFlexLeft: {
		display: "flex",
		justifyContent: "flex-start",
		alignItems: "center",
	},
	displayFlexRight: {
		display: "flex",
		justifyContent: "flex-end",
		flex: 1,
		alignItems: "center",
	},
	elementsRoot: {
		display: "flex",
		flexWrap: "wrap",
		// justifyContent: 'space-around',
		justifyContent: "flex-start",
		overflow: "hidden",
		backgroundColor: theme.palette.background.paper,
	},
	gridList: {
		width: 500,
		// minHeight: 300,
		alignContent: "flex-start",
	},
	listItemActive: {
		borderRadius: 3,
		boxShadow: "0px 3px 5px 2px rgba(255, 105, 135, .3)",
		// color: "red",
	},
}));










//proto list
export default function Protos(props) {
	const classes = useStyles();
	const { protoClasses, setProto, proto, setProtos, protos, activeClassId, activeProtoId, setActiveProtoId } = React.useContext(
		ProtoContext
	);
	const { setError } = useAlertContext();
	function handleClick(id) {
		setActiveProtoId(id);
		props.onItemClick && props.onItemClick(id);
	}

	const [open, setOpen] = React.useState(false);

	const fields = [
		{ name: "name", label: "Name" ,xs:12},
		{ name: "type", label: "Type", type: "select", options: protoTypes },
		{ name: "icon", label: "Icon", type: "file" },
		{ name: "classId", type: "hidden", value: activeClassId },
	];

	const handleSubmitAdd = async ($form) => {
		var r = await service.graphElementProtos.create(new FormData($form[0]));
		console.log(r);
		if (r.State == 0) {
			setOpen(false);
			await refreshProtos(setError, activeClassId, setProtos, setActiveProtoId);
		} else {
			setError(r.Message);
		}
	};

	return (
		<div className={classes.elementsRoot}>
			<GridFormDialog
				fields={fields}
				open={open}
				setOpen={setOpen}
				title="添加"
				handleSubmit={handleSubmitAdd}
				form={{ enctype: "multipart/form-data" }}
				maxWidth="sm"
			></GridFormDialog>
			<GridList cellHeight={100} className={classes.gridList} cols={5}>
				<GridListTile cols={1}>
					<div style={{ width: "100%", padding: "20px 20px" }}>
						<Fab
							color="secondary"
							style={{ height: 60, width: 60 }}
							onClick={() => {
								setOpen(true);
							}}
						>
							<AddIcon style={{ height: "100%", width: "100%" }}></AddIcon>
						</Fab>
					</div>
				</GridListTile>
				{protos.map((v, i) => (
					<GridListTile
						key={v.Id}
						cols={1}
						style={{ margin: "6px 4px" }}
						className={activeProtoId == v.Id ? classes.listItemActive : ""}
						onClick={handleClick.bind(this, v.Id, v)}
					>
						<img src={v.Icon} style={{ height: "80%" }} alt={v.Name} />
						<div style={{ textAlign: "center", fontSize: "0.7em" }}>{v.Name}</div>
					</GridListTile>
				))}
			</GridList>
		</div>
	);
}